<template>
  <div class="content-bottom">
    <div class="box">
      <!-- 左小图区域 -->
      <div class="left-box bottom-box">
        <div class="top-item">
          <span class="item-title" style="font-size:1rem">左滚筒</span>
          <span class="item-status">运行</span>
        </div>
        <div class="top-item">
          <span class="item-title">高度</span>
          <span class="item-value">0.3m</span>
        </div>
        <div class="top-item">
          <span class="item-title">温度</span>
          <span class="item-value">78℃</span>
        </div>
        <div class="top-item">
          <span class="item-title">电流</span>
          <span class="item-value">37A</span>
        </div>
      </div>
      <!-- 仪表盘图表区域 -->
      <div class="center-box bottom-box">
        <div class="center-box-chart">
          <div ref="chart" class="chart" />
          <div class="info">
            <div class="speed">
              {{ speed }}m/min
            </div>
            <div class="speedtrap">向机尾</div>
          </div>
        </div>
      </div>
      <!-- 右小图区域 -->
      <div class="left-box bottom-box">
        <div class="top-item">
          <span class="item-title" style="font-size:1rem">右滚筒</span>
          <span class="item-status">运行</span>
        </div>
        <div class="top-item">
          <span class="item-title">高度</span>
          <span class="item-value">2.4m</span>
        </div>
        <div class="top-item">
          <span class="item-title">温度</span>
          <span class="item-value">78℃</span>
        </div>
        <div class="top-item">
          <span class="item-title">电流</span>
          <span class="item-value">37A</span>
        </div>
      </div>
    <!-- longbar区域 -->
    </div>
    <div class="bottombox">
      <div class="chart1">
        <HerinContainer class="chart-box" :delay="1" title="液压支架压力监测">
          <div slot="tab" style="color:#F8F8F8;font-size:0.875rem">当前支架 <span style="color:#00FDFF;margin: left 1.25rem;">80</span></div>
          <template #content>
            <div class="chart2">
              <long-bar-chart-2 :data="chart2Data" :color="['#57FFAA']" :xAxis=true />
            </div>
          </template>
        </HerinContainer>
    </div>
    </div>
  </div>
</template>

<script>
import LongBarChart2 from '@/components/chart/bar/LongBarChart2.vue';
import HerinContainer from '@/components/HerinContainer';
import * as echarts from 'echarts';

import { longbarData } from '../common/titles';
export default {
  components: {
    LongBarChart2,
    HerinContainer
  },
  props: {
  },
  data() {
    return {
      chartData: longbarData.pressureList,
      speed: 8,
      chart: null
    };
  },
  computed: {
    // chartData() {
    //   return this.longbarData.pressureList;
    // },
    chart2Data() {
      const status = {
        'LOSS': '#FFFFFF',
        'NORMAL': '#57FFAA',
        'PRE_WARNING': '#FFD101',
        'OVERRUN': '#EF303B',
        'NONE': '#FFFFFF'

      };
      const list = [...this.chartData].map(item => {
        return {
          s: '支架压力',
          x: String(item.supportNo),
          y: Number(item.pressure) || 0,
          z: item.supportNo,
          color: status[item.pressureStatus]
        };
      });
      return list;
      // return [];
    }
  },
  watch: {
    speed(val) {
      this.initChart(Number(val));
    }
  },
  mounted() {
    // console.log(this.chart2Data);
    this.initChart(Number(this.speed));
  },
  methods: {
    initChart(num) {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs['chart']);
      }
      this.chart.setOption({
        series: [
          {
            name: '刻度',
            type: 'gauge',
            radius: '100%',
            min: 0,
            max: 18,
            startAngle: 190,
            endAngle: -10,
            splitNumber: 2,
            axisLine: {
              show: false,
              lineStyle: {
                color: [[num / 18, '#00FDFF'], [1, 'rgba(255,255,255,0.8)']]
              }
            }, // 仪表盘轴线
            axisLabel: { // 刻度标签。
              show: true,
              color: '#fff',
              distance: 33
            },
            axisTick: { // 刻度样式
              show: true,
              splitNumber: 18,
              length: -14,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            splitLine: { // 分隔线样式
              show: true,
              length: -16,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            detail: {
              show: false
            }
          },
          {
            name: '刻度',
            type: 'gauge',
            radius: '94%',
            min: 0,
            max: 18,
            startAngle: 190,
            endAngle: -10,
            splitNumber: 2,
            axisLine: { show: false }, // 仪表盘轴线
            axisLabel: { show: false },
            axisTick: { // 刻度样式
              show: true,
              splitNumber: 18,
              lineStyle: {
                color: '#fff',
                width: 1
              },
              length: -2
            },
            splitLine: { // 分隔线样式
              show: false
            },
            detail: {
              show: false
            }
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content-bottom {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 10;
  transform: translateX(-50%);
  width: 59.3125rem;
  .box{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 7.8125rem;
    width: 71.25rem;
    height: 7.8125rem;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
  }
  .bottom-box {
    height: 8.625rem;
    padding: .625rem 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .top-item {
      display: flex;
      justify-content: space-between;
      padding:0 1.875rem 0;
      box-sizing: border-box;
      .item-title {
        font-size:.875rem;
        color: #ffffff;
      }
      .item-status {
        font-size: 0.875rem;
        color: #57ffaa;
      }
      .item-value {
        font-size: 0.875rem;
        color: #ffffff;
      }
    }
    // .top-item:last-child {
    //   padding: 0 1.875rem 0;
    // }
  }
  .left-box {
    width: 14.375rem;
    height: 8.625rem;
    background-image: url("@/assets/img/excavation/left-bootom-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .center-box {
    width: 16.375rem;
    height: 12.8125rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position:fixed;
    // bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    .center-box-chart{
      height: 6.875rem;
      width: 10.625rem;
      position: relative;
      .info{
        position: absolute;
        top: 3.4375rem;
        left: 50%;
        transform: translateX(-50%);
        width: 5.875rem;
        height: 1.125rem;
        text-align: center;
        color: #ffffff;
      }
      .speed{
        font-weight: 700;
        font-size: 1.25rem;
      }
      .speedtrap{
        font-size: 1rem;
      }
      .chart{
        height: 10.625rem;
        width: 10.625rem;
      }
    }
    .center-box-bar {
      height: 3.125rem;
      width: 16.375rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #D8D8D8;
      font-size: .875rem;
      background-color: rgba(16, 16, 16, 0.1);
      margin-top: 1.5625rem;
    }
  }
  .right-box {
    width: 14.375rem;
    height: 5.8125rem;
    background-image: url("@/assets/img/excavation/left-bootom-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
.bottombox{
  width: 71.25rem;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.125rem;
  .chart-box{
    width: 71.25rem !important;
    .herin-container-content{
      margin-top: 0 !important;
      padding: 0 !important;
    }
    .chart2{
      height: 1.875rem;
      margin-right: .625rem;
    }
  }
}
</style>
